<!-- Page header -->
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col-8">
        <!-- 页面标题 -->
        <h2 class="page-title">
          首页 - 牛人列表
        </h2>
        <div class="text-muted mt-1 bit-paginator-user-text"></div>
      </div>
      <!-- 搜索框 -->
      <div class="col-4">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="请输入关键字..." id="index_search_user_keyword">
          <!-- 宽屏 -->
          <button class="btn btn-outline-primary d-none d-sm-inline-block index_search_user" type="button">
            <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
            <span>搜索</span>
          </button>
          <!-- 窄屏 -->
          <button class="btn btn-outline-primary d-sm-none btn-icon index_search_user" type="button">
            <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Page body -->
<div class="page-body">
  <div class="container-xl">
    <div class="row row-cards" id="index-user-items-body">
      <!-- <div class="col-md-6 col-lg-3">
        <div class="card">
          <div class="card-body p-4 text-center">
            <span class="avatar avatar-xl mb-3 rounded index-user-avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
            <h3 class="m-0 mb-1"><a href="javascript:void(0);" target="_blank" class="index-user-name">姓名</a></h3>
            <div class="text-muted index-user-major">专业</div>
            <div class="mt-3 index-user-tags">
              <span class="badge bg-green-lt me-1">tags</span>
            </div>
          </div>
          <div class="d-flex">
            <a href="mailto:mail" class="card-btn index-user-resume-btn">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path><path d="M3 7l9 6l9 -6"></path></svg>
              发送邮件</a>
            <a href="tel:phone" class="card-btn index-user-phone-btn">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" /></svg>
              拨打电话</a>
          </div>
        </div>
      </div> -->
    </div>
    <!-- 分页 -->
    <div class="row mt-4">
      <div class="d-flex align-items-center">
        <p class="m-0 text-muted bit-paginator-user-text"></p>
        <ul class="bit-paginator-users pagination m-0 ms-auto"></ul>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    // 记录当前页号
    let cuuurentUserPageNum = 1;
    // 加载牛人列表
    function loadUserList(pageNum) {
      // 请求职位列表
      let sendData = {
        pageNum : pageNum,
        pageSize : 8,
        tag : $('#index_search_user_keyword').val()
      };
      // AJAX请求
      $.ajax({
        type: 'get',
        url : 'user/indexPages',
        contentType: 'application/x-www-form-urlencoded',
        data : sendData,
        success : function (respData) {
          // 失败
          if (respData.code != 0) {
            // 提示
            $.toast({
              heading: '提示',
              text: respData.message,
              icon: 'info'
            });
            return;
          }
          // 成功构建页面
          buildJobList(respData.data)
        }
      });
    }
    // 第一次加载
    loadUserList(cuuurentUserPageNum);

    // 构建牛人列表
    function buildJobList(data) {
      // 清空现有内容
      $('#index-user-items-body').html('');
      // 没有记录
      if (data.rows.length == 0) {
        // 显示内容
        $('#index-user-items-body').html('<h3>没有职位记录</h3>');
        // 清空分页信息
        $('.bit-paginator-user-text').html('');
        $('.bit-paginator-users').html('');
        return;
      }

      // 开始构建
      data.rows.forEach(user => {
        // 用户头像
        if (!user.avatarUrl) {
          user.avatarUrl = avatarUrl;
        }
        // 用户元素，调用本地邮件和电话应用程序mailto: tel:
        let userItemHtmlStr = '<div class="col-md-6 col-lg-3">'
            + ' <div class="card">'
            + ' <div class="card-body p-4 text-center">'
            + ' <span class="avatar avatar-xl mb-3 rounded index-user-avatar" style="background-image: url(' + user.avatarUrl + ')"></span>'
            + ' <h3 class="m-0 mb-1"><a href="' + user.resumeUrl + '" target="_blank" class="index-user-name" >' + user.name + '</a></h3>'
            + ' <div class="text-muted index-user-major">' + user.major.name + '</div>'
            + ' <div class="mt-3 index-user-tags">'
            + ' </div>'
            + ' </div>'
            + ' <div class="d-flex">'
            + ' <a href="mailto:' + user.email + '" class="card-btn index-user-resume-btn">'
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path><path d="M3 7l9 6l9 -6"></path></svg>'
            + ' 发送邮件</a>'
            + ' <a href="tel:' + user.phoneNum + '" class="card-btn index-user-phone-btn">'
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" /></svg>'
            + ' 拨打电话</a>'
            + ' </div>'
            + ' </div>'
            + ' </div>';
        // 转为jQuery对象
        let userItemEL = $(userItemHtmlStr);
        // 处理牛人标签
        // 标签父元素
        let userTagsEl = userItemEL.find('.index-user-tags');
        if (user.tag) {
          let userTagArray = user.tag.split(',');
          if (userTagArray.length == 0) {
            // 没有标签
            return;
          }
          // 添加标签
          userTagArray.forEach(userTag => {
            userTagsEl.append($('<span class="badge bg-green-lt me-1">' + userTag + '</span>'))
          });
        } else {
          // 空字符，防止出现页面布局
          userTagsEl.append($('<span class="me-1">&nbsp;</span>'))
        }
        // 追加到页面
        $('#index-user-items-body').append(userItemEL);
      });
      // 显示分页
      buildUserPaginator(data);
    }

    // 分页显示
    function buildUserPaginator (data) {
        $('.bit-paginator-users').jqPaginator({
          totalPages: data.totalPage,
          visiblePages: 10,
          currentPage: data.pageNum,
          first: '<li class="page-item first"><a class="page-link" href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevrons-left"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M11 7l-5 5l5 5" /><path d="M17 7l-5 5l5 5" /></svg></a></li>',
          prev: '<li class="page-item prev"><a class="page-link" href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M15 6l-6 6l6 6" /></svg></a></li>',
          next: '<li class="page-item next"><a class="page-link" href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M9 6l6 6l-6 6" /></svg></a></li>',
          last: '<li class="page-item last"><a class="page-link" href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevrons-right"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M7 7l5 5l-5 5" /><path d="M13 7l5 5l-5 5" /></svg></a></li>',
          page: '<li class="page-item page"><a class="page-link" href="javascript:void(0)">{{page}}</a></li>',
          onPageChange: function (pageNum, type) {
              $('.bit-paginator-user-text').html('当前显示第 ' + pageNum + ' / ' + data.totalPage + ' 页');
              // 当前访问的页号
              cuuurentUserPageNum = pageNum;
              // 加载职位列表
              if (type == 'change') {
                loadUserList(pageNum);
              }
              
          }
      });
    }
    
    // 绑定搜索按钮事件
    $('.index_search_user').click(function(){
      // 设置起始页为1
      cuuurentUserPageNum = 1;
      // 开始搜索
      loadUserList(cuuurentUserPageNum);
    });
  });
</script>
